<template>

  <div id="app">
    <!-- 输入框 -->
    <input type="text" v-model="value" placeholder="请输入姓名/年龄" />
    <!-- 查询按钮 -->
    <button @click="search">查询</button>
    <!-- 给table表格赋值 -->

    <table>
      <thead>
      <tr>

     
        <td>发票类型</td>
        <td>开票日期</td>
        <td>发票号码</td>
        <td>销售方</td>
        <td>发票状态</td>
        <td>开票日期</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item,i) in tableData" :key="i">
        <td>{{ item.name }}</td>
        <td>{{ item.sex }}</td>
        <td>{{ item.address }}</td>
        <td>{{ item.where }}</td>
        <td>{{ item.steta }}</td>
        <td>{{ item.timet }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      tableData: [
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11'},
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11'},
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张四', sex: '19' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'12' },
      ],
      //表格B用原表格的数据
      tableDataB: [
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11'},
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        { name: '张三', sex: '18' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'11' },
        {name: '张四', sex: '19' ,address:'迟到',where:'sdv',steta:'sdgbdg',timet:'12'},
      ],
    };
  },
  methods: {
    // 点击搜索 支持模糊查询
    search() {
      //表格用原表格的数据 即 用于搜索的总数据
      this.tableData = this.tableDataB;
      //获取到查询的值，并使用toLowerCase():把字符串转换成小写，让模糊查询更加清晰
      let _search = this.value.toLowerCase();
      let newListData = []; // 用于存放搜索出来数据的新数组
      if (_search) {
        //filter 过滤数组
        this.tableData.filter((item) => {
          // newListData中 没有查询的内容，就添加到newListData中
          if (
              item.name.toLowerCase().indexOf(_search) !== -1 ||
              item.sex.toLowerCase().indexOf(_search) !== -1
          ) {
            newListData.push(item);
          }
        });
      }
      //查询后的表格 赋值过滤后的数据
      this.tableData = newListData;
    },
  },
}

</script>

<style scoped>

</style>